<template>
	<view class="warp">
		<u-toast ref="uToast"></u-toast>
		<view class="top">
			<u-icon name="info-circle-fill" color="#2979ff" size="28"></u-icon>
			<navigator url="../orderNotice/orderNotice" style="padding-left: 20rpx;font-size: 45rpx;font-weight: bold;">预约须知</navigator>
		</view>
		<view style="display: flex;flex-direction: row;margin-bottom: 20rpx;background: #b9b9b9;height: 200rpx;margin-top: 20rpx;">
			<u--text :text="setmeal.name"></u--text>
			<u--text :text="setmeal.remark"></u--text>
			<view>
				<u--text type="warning" :text="setmeal.age" :bold="true" size="20"></u--text>
				<u--text type="warning" :bold="true" size="20"
				:text="setmeal.sex == '0' ? '性别不限' : setmeal.sex == '1' ? '男':'女'"></u--text>
			</view>
			
		</view>
		<u--form
		labelPosition="left"
		:model="model1"
		:rules="rules"
		ref="form1"
		>
		<u-form-item
			label="姓名"
			prop="userInfo.name"
			borderBottom
			ref="item1"
		>
			<u--input
				v-model="model1.userInfo.name"
				border="none"
			></u--input>
		</u-form-item>
		<u-form-item
			label="性别"
			prop="userInfo.sex"
			borderBottom
			@click="showSex = true; hideKeyboard()"
			ref="item1"
		>
		<u--input
			v-model="model1.userInfo.sex"
			disabled
			disabledColor="#ffffff"
			placeholder="请选择性别"
			border="none"
		></u--input>
		<u-icon
			slot="right"
			name="arrow-right"
		></u-icon>
			</u-form-item>
		
		<u-action-sheet
				:show="showSex"
				:actions="actions"
				title="请选择性别"
				description="如果选择保密会报错"
				@close="showSex = false"
				@select="sexSelect"
		>
		</u-action-sheet>
		<u-form-item
			label="手机号"
			prop="userInfo.telephone"
			borderBottom
			ref="item2"
		>
			<u--input
				v-model="model1.userInfo.telephone"
				border="none"
			></u--input>
			<u-toast ref="uToast"></u-toast>
					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
					@change="codeChange"></u-code>
					<u-button @tap="getCode" type="primary" style="width: 200rpx;">{{tip}}</u-button>
		</u-form-item>
		<u-form-item
			label="验证码"
			prop="userInfo.validateCode"
			borderBottom
			ref="item4"
		>
			<u--input
				v-model="model1.userInfo.validateCode"
				border="none"
			></u--input>
		</u-form-item>
		<u-form-item
			label="身份证号"
			prop="userInfo.idCard"
			borderBottom
			ref="item3"
		>
			<u--input
				v-model="model1.userInfo.idCard"
				border="none"
			></u--input>
		</u-form-item>
		<u-form-item>
			<u-cell-group>
					<u-cell icon="order" title="选择预约时间" @click="confirm"></u-cell>
			</u-cell-group>
			<text>{{model1.userInfo.orderDate}}</text>
			<u-calendar 
					title="请选择预约时间"
			        showLunar
			        :show="show" 
			        @confirm="confirm">
				</u-calendar>
		</u-form-item>
		<u-form-item>
			<u-button type="success" size="large" text="提交预约" @click="postForm"></u-button>
		</u-form-item>
		</u--form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				setmeal:{},
				show:false,
				showSex: false,
				seconds:60,
				tip:"获取验证码",
				model1: {
					userInfo: {
						name: 'www',
						sex: '男',
						telephone:'19157736525',
						idCard:'361021200111130010',
						orderDate:"",
						validateCode:"1111",
						setmealId:''
					},
					new_user:{
						name: 'www',
						sex: '男',
						telephone:'19157736525',
						idCard:'361021200111130010',
						orderDate:"",
						validateCode:'1111',
						setmealId:''
					}
				},
				actions: [{
					name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'userInfo.name': [{
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					{
						pattern: /^[0-9a-zA-Z]*$/g,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '只能包含字母或数字'
					},
					// 6-8个字符之间的判断
					{
						min: 2,
						max: 18,
						message: '长度在6-18个字符之间'
					}
					],
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
					'userInfo.telephone':[{
						type:'string',
						required:true,
						message:"请输入手机号",
						trigger: ['blur', 'change']
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}],
					'userInfo.idCard':[
						{
							type:'string',
							required:true,
							message:"请输入身份证号",
							trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.idCard(value);
						},
						message: '身份证格式不正确',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}]
				},
				radio: '',
				switchVal: false
			};
		},
		methods: {
			postForm(){
				this.$refs.form1.validateField('userInfo.name')
				this.$refs.form1.validateField('userInfo.sex')
				this.$refs.form1.validateField('userInfo.telephone')
				this.$refs.form1.validateField('userInfo.idCard')
				this.$refs.form1.validate().then(res=>{
					if(this.model1.userInfo.orderDate !== ""){
						this.model1.new_user = this.model1.userInfo
						this.model1.new_user.sex = this.model1.userInfo.sex == '性别不限' ? '0' : this.model1.userInfo.sex == '男' ? '1':'2'
						console.log(JSON.stringify(this.model1.new_user))
						uni.request({
							url:"/api/order/submit.do",
							data:{
								orderInfo:this.model1.new_user
							},
							method:"POST",
							header:{
								'content-type':'application/json'
							},
							success: (res) => {
								console.log(res.data)
								if(res.data.flag){
									this.$refs.uToast.show({
										type: 'success',
										message: res.data.message,
										title:res.data.message,
										iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
									})
									uni.redirectTo({
										url:"/pages/orderSuccess/orderSuccess?orderId="+res.data.data,
									})
								}else{
									this.$refs.uToast.show({
										type: 'error',
										message: res.data.message,
										title:res.data.message,
										iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
									})
								}
							}
						})
					}else{
						uni.$u.toast('日期不能为空')
					}
					
				}).catch(errors => {
				uni.$u.toast('校验失败')
			})	
			},
			confirm(e){
				console.log(e)
				this.model1.userInfo.orderDate = e[0]
				this.show = !this.show
			},
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				
			},
			codeChange(text) {
				this.tip = text;
			},
			getCode() {
				if(this.model1.userInfo.telephone === '' && this.model1.userInfo.telephone.length == 0){
					uni.$u.toast('手机号不能为空');
					return
				}else if(!uni.$u.test.mobile(this.model1.userInfo.telephone)){
					uni.$u.toast('手机号格式错误');
					return
				}
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					// console.log(this.model1.userInfo.phone)
					uni.request({
						url:"/api/validateCode/sendForOrder.do",
						data:{
							telephone:this.model1.userInfo.telephone
						},
						method:"GET",
						success() {
							
						}
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
						}, 2000);
					} else {
					uni.$u.toast('倒计时结束后再发送');
					}
				},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
		},
		onLoad() {
			
			// console.log("111")
			this.setmeal = this.$store.state.setmeal
			console.log(this.setmeal)
			this.model1.userInfo.setmealId = this.setmeal.id
			this.model1.new_user.setmealId = this.setmeal.id
			// uni.$on("setOrder",function(data){
			// 	console.log('监听到事件来自 update ，携带参数 msg 为：' + data);
			// })
			// uni.$off("setOrder",function(){
			// 	console.log("结束监听")
			// })
		}
	}
</script>

<style scoped>
	.warp{
		padding: 30rpx;
	}
	.top{
		display: flex;
		flex-direction: row;
	}
</style>
